<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
            <el-form-item label="园所性质" prop="type">
             <el-select v-model="queryParams.type" placeholder="请选择园所性质" clearable size="small">
               <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
             </el-select>
             </el-form-item>
             <el-form-item label="地区类型" prop="nature">
               <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
                 <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
               </el-select>
             </el-form-item>
             <el-form-item label="学期" prop="semId">
                <el-select  v-model="queryParams.semId" filterable clearable multiple collapse-tags placeholder="请选择学期" style="width: 300px;" >
                  <el-option
                    v-for="item in semsterList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                    size="small">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
               </el-form-item>
      </el-form>
      <div class="echart" >
            <div class="top">
                <div class="heightChart" ref="heightChart"></div>
                <div class="weightChart" ref="weightChart"></div>
            </div>
            <div class="bottom">
                <div class="abnormalChart" ref="abnormalChart"></div>
            </div>
        </div>
    </div>
</template>

<script>

import moment from "moment";
import { selectSemster} from "@/api/base/semster";
export default {
  name: "qyyeysmx",
  data() {
    return {
        queryParams:{
            type:'',
            nature:'',
            semId:''
        },
        legendSelected:{
            '2岁':true,
            '3岁':false,
            '4岁':false,
            '5岁':false,
            '6岁':false,
            '7岁':false,
        },
        heightChart:null,
        heightList:[
            {name:'园所1',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所2',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所3',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所4',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所5',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
        ],
        weightChart:null,
        weightList:[
            {name:'园所1',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所2',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所3',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所4',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
            {name:'园所5',two:'50',three:'60',four:'65',five:'68',six:'70',seven:'75'},
        ],
        abnormalChart:null,
        abnormalList:[
            {name:'园所1',short:'20',height:'20',weight:'20',light:10},
            {name:'园所1',short:'20',height:'20',weight:'20',light:10},
            {name:'园所1',short:'20',height:'20',weight:'20',light:10},
            {name:'园所1',short:'20',height:'20',weight:'20',light:10},
        ],
        // 学期数据
        semsterList: [],
        schoolTypeOptions:[],
        schoolNatureOptions:[]
    };
  },
  created() {
       this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
       });
       selectSemster({'status':1}).then(response => {
         this.semsterList = response.rows;
        //  this.semsterList.map((item,index)=>{
        //     if(index<6){
        //         this.queryParams.semId.push(item.id)
        //     }
        //  })
        //  console.log( this.semsterList);
       });

  },
  mounted(){
        // this.getList()
        this.heightChart = this.$echarts.init(this.$refs.heightChart);
        this.weightChart = this.$echarts.init(this.$refs.weightChart);
        this.abnormalChart = this.$echarts.init(this.$refs.abnormalChart);
        this.heightChartFn();
        this.weightChartFn();
        this.abnormalChartFn();
   },
  methods: {

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams= {
            type:'',
            nature:'',
            semId:''
      },
      this.resetForm("queryForm");
      this.handleQuery();
    },
    heightChartFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '幼儿平均身高统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
           bottom:0,
           show:6/this.heightList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:6/this.heightList.length*100
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',

          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:30,
               interval: 0,//使x轴文字显示全
              },
              data: this.heightList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value',
              name:'单位：cm'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '2岁',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'45%',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.heightList.map(item=>item.two)
              },
              {
                  name: '3岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.heightList.map(item=>item.three),
              },
              {
                  name: '4岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.heightList.map(item=>item.four),
              },
              {
                  name: '5岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.heightList.map(item=>item.five),
              },
              {
                  name: '6岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.heightList.map(item=>item.six),
              },
              {
                  name: '7岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.heightList.map(item=>item.seven),
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.heightChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
     weightChartFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '幼儿平均体重统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
           bottom:0,
           show:6/this.weightList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:6/this.weightList.length*100
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:30,
               interval: 0,//使x轴文字显示全
              },
              data: this.weightList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value',
              name:'单位：kg'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '2岁',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'45%',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.weightList.map(item=>item.two)
              },
              {
                  name: '3岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.weightList.map(item=>item.three),
              },
              {
                  name: '4岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.weightList.map(item=>item.four),
              },
              {
                  name: '5岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.weightList.map(item=>item.five),
              },
              {
                  name: '6岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.weightList.map(item=>item.six),
              },
              {
                  name: '7岁',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.weightList.map(item=>item.seven),
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.weightChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
     abnormalChartFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '幼儿身高体重异常数据统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         dataZoom:{
           bottom:0,
           show:12/this.abnormalList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.abnormalList.length*100
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:30,
               interval: 0,//使x轴文字显示全
              },
              data: this.abnormalList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value',
              name:'单位：人'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '身高偏高',
                  type: 'bar',
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'45%',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.height)
              },
              {
                  name: '身高偏低',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.short),
              },
              {
                  name: '体重偏重',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.weight),
              },
              {
                  name: '体重偏轻',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'45%',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.abnormalList.map(item=>item.light),
              },

          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.abnormalChart.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
     //地图监听窗口缩放事件
     monitorResize(){
        this.heightChart.resize();
        this.weightChart.resize();
        this.abnormalChart.resize();
      },

  }
};
</script>

<style lang="scss" scoped>
.echart{
    width:100%;
    height: 700px;
    .top {
        display: flex;
        justify-content: space-between;
        width: 100%;;
        height: 50%;
        .heightChart{
            width: 45%;
            height: 100%;
        }
        .weightChart{
            width: 45%;
            height: 100%;
        }
    }
    .bottom{
        width: 100%;;
        height: 50%;
        .abnormalChart{
            margin-top: 50px;
            width: 100%;
            height: 100%;
        }
    }
}
</style>
